<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
	<link rel="stylesheet" type="text/css" href="./jquery-easyui-1.2.2/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="./jquery-easyui-1.2.2/themes/icon.css">
	<script type="text/javascript" src="./jquery-easyui-1.2.2/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="./jquery-easyui-1.2.2/jquery.easyui.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var p = $('body').layout('panel','west').panel({
				onCollapse:function(){
					alert('collapse');
				}
			});
			setTimeout(function(){
				$('body').layout('collapse','east');
			},0);
			
			 $('#westtree').tree({    
				animate:true, 
				url:"json/tree_zi_data.json",
				onClick:function(node){   
                    // alert('you click '+node.text);  
					// alert('you click '+node.attributes.url);
						
					showUrl(node.attributes.url);
					
					// 增加一个 Tab
					addTab(node.text,node.attributes.url);
					
					// 替换iframe中的src
					$("#iframediv").attr("src",node.attributes.url);  	
						
					
					// $('#centeriframe').attr("src","node.attributes.url");
					//  $("#iframediv").attr("src",node.attributes.url);   
					// addTreeTab(node.attributes.url);
               }   
               
           }); 
           
		});
		
		
		function addTab(title,url){
			// 判断是否存在 Tab
			if ($('#centerdiv').tabs('exists', title)){
		        $('#centerdiv').tabs('select', title);
		    } else {
		        var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
		        $('#centerdiv').tabs('add',{
		            title:title,
		            content:content,
		            closable:true
		        });
		    }
		}
		
		
		var treeindex = 0;
		function addTreeTab(url){
			alert(url);
			treeindex++;
			$('#centerdiv').tabs('add',{
				title:'New Tab ' + treeindex,
				content:'<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>',
				closable:true
				
			});
		}
		
		// 弹出dialog
		function addDialog(){
			$('#dialogdiv').dialog({
				// toolbar:该工具栏置于对话框的顶部，每个工具栏包含:text, iconCls, disabled, handler等属性
				title:'dialog弹出',
				// 当True时可显示最小化按钮
				minimizable:true,
				maximizable:true,
				toolbar:[{
					text:'Add',
					iconCls:'icon-add',
					// 事件处理
					handler:function(){
						alert('add')
					}
				},'-',{
					text:'Save',
					// 图标
					iconCls:'icon-save',
					handler:function(){
						alert('save')
					}
				}],
				// buttons:这个按钮置于对话框的底部，每个按钮包含:text, iconCls, handler等属性
				buttons:[{
					text:'Ok',
					iconCls:'icon-ok',
					handler:function(){
						alert('ok');
					}
				},{
					text:'Cancel',
					handler:function(){
						// div = dialogdiv 的dialog关闭
						$('#dialogdiv').dialog('close');
					}
				}]
			});
		
		}
		
		function openDialog(){
			$('#dialogdiv').dialog('open');
		}
		function closeDialog(){
			$('#dialogdiv').dialog('close');
		}
		
		function alert1(){
			$.messager.alert('My Title','Here is a message!');
		}
		
		function confirm1(){
			$.messager.confirm('My Title', 'Are you confirm this?', function(r){
				if (r){
					// alert('confirmed:'+r);
					$.messager.alert('My Title',r);
					// location.href = 'http://www.google.com';
					// show1();
				}
			});
		}
		function prompt1(){
			$.messager.prompt('My Title', 'Please type something', function(r){
				if (r){
					// alert('you type:'+r);
					$.messager.alert('My Title','you type:'+r);
				}
			});
		}
		
		function show1(){
			$.messager.show({
				title:'My Title',
				msg:'Message will be closed after 4 seconds.',
				showType:'show'
			});
		}
		
		function showUrl(url){
			$.messager.show({
				title:'My Title',
				msg:'访问的地址：'+url,
				showType:'show'
			});
		}
	</script>

</head>

<body class="easyui-layout">
	
		
	<!-- region="north" -->
	<div region="north" border="false" style="height:60px;background:#B3DFDA;">north region
		<div id="dialogdiv" style="padding:5px;width:400px;">
				<!-- 弹出框内容 -->
   				<b>dialog content.</b>
		</div> 
		
		<div>
			<a href="#" onclick="alert1()">alert</a> |<a href="#" onclick="confirm1();">confirm</a>|<a href="#" onclick="prompt1()">prompt</a>
		</div>
	</div>
	
	<!-- region="west" -->
	<div region="west" iconCls="icon-reload" title="Tree Menu" split="true" style="width:180px;padding:10px;">
		<!-- tree -->
		<div>
			<ul class="easyui-tree" id="westtree">
			
	   		</ul>  
   		</div>
   	</div>	
   		
	
	<!-- region="center" -->
	<div region="center" title="Main Title" id="centerdiv" class="easyui-tabs">
	</div>
	
	<!-- region="east" -->
	<div region="east" split="true" title="East" style="width:100px;padding:10px;">east region
		
	</div>
	
	<!-- region="south" -->
	<div region="south" border="false" style="height:50px;background:#A9FACD;padding:10px;">south region</br>
	
	</div>
		
</body>
</html>
